<template>
    <div style="margin-top: 100px;margin-left: 200px;margin-right: 200px">

        <h3 class="loginTitle" style="text-align: center">欢迎登录后台管理系统</h3>
            <el-form :model="form" class="loginContainer" ref="form" size="normal" :rules="rules">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item prop="code">
                    <el-input type="text" auto-complete="false" v-model="form.code" show-password placeholder="点击图片更换验证码" style="width: 250px;margin-right: 5px"></el-input>
                    <img src="captchaUrl" @click="updateCaptcha">
                </el-form-item>

                <el-form-item prop="remember">
                    <el-checkbox v-model="checked" class="remember">记住我</el-checkbox>
                </el-form-item>

                <el-form-item prop="register">
                    <el-button type="text" @click="register">没有账号？去注册</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button style="width: 100%" type="primary" @click="login">登 录</el-button>
                </el-form-item>
            </el-form>

    </div>
</template>

<script>
    import request from "../utils/request";
    //导入给md5加密方法
    import {strToMd5} from "../utils/md5";

    export default {
        name: "Login",
        data(){
            return{
                captchaUrl: 'captcha/time=' + new Date(),//避免是同一张图片
                form:{

                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
                    ]
                    ,
                    // code: [
                    //     {required: true, message: '是否记住密码', trigger: 'blur'}
                    //     // ,
                    //     // {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
                    // ]
                },
                checked:true,
                //加载方法的时候调用 清除用户缓存
                created(){
                    sessionStorage.removeItem("user")
                }
            }

        },
        methods:{
            login() {

                this.$refs['form'].validate((valid) => {//验证这个规则合法才会发送这个请求
                    if (valid) {

                        console.log("来登录啊:"+JSON.stringify(this.form));
                        //对密码进行加密
                        // this.form.password = strToMd5(this.form.password)
                        request.post("/user/login",this.form).then(res=>{
                            console.log("知道啊，过不去啊:" +JSON.stringify(res));

                            if (res.code == '0'){
                                    this.$message({
                                        type:"success",
                                        message:"登录成功"
                                    })

                                sessionStorage.setItem("user",JSON.stringify(res.data))//缓存用户信息
                                    this.$router.replace("/user")//跳转到主页

                                    return res;
                                }else {
                                    this.$message({
                                        type:"error",
                                        message:res.msg
                                    })
                                    console.log("知道啊，网不对啊");

                                }
                            }
                        )
                    }
                });

            },

            register(){
                this.$router.replace("/register")//跳转到注册页

            },

            updateCaptcha(){
                this.captchaUrl = 'captcha/time=' + new Date()
            }

        }
    }
</script>

<style >
    .loginContainer{
        border-right: 15px;
        background-clip: padding-box;
        margin: 50px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle{
        margin: 0px auto 48px auto;
        text-align: center;
    }

    .remember{
        text-align: left;
        margin: 0px auto 0px auto;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }

    .register{
        text-align: right;
        display: flex;
        margin: 0px auto 0px auto;

    }

</style>